<template>
  <main class="wss-container">
    <div class="label-box-content">
      <NewCard title="提现管理">
        <div class="labelWithdraw">
          <el-form
            ref="form"
            :rules="rules"
            :model="form"
            :label-position="labelPosition"
            :label-width="formLabelWidth"
          >
            <el-form-item label="最低提现金额（元）" prop="w_min_money">
              <el-input
                maxlength="8"
                v-model.number="form.w_min_money"
                placeholder="0.00"
              ></el-input>
            </el-form-item>
            <el-form-item label="最高提现金额（元）" prop="w_max_money">
              <el-input
                maxlength="8"
                v-model.number="form.w_max_money"
                placeholder="1000000.00"
              ></el-input>
            </el-form-item>
            <el-form-item label="提现手续费" prop="w_charge">
              <el-input
                maxlength="3"
                v-model="form.w_charge"
                placeholder="0"
              ></el-input
              >&nbsp;&nbsp;%
            </el-form-item>
            <el-form-item label="预计到账时间">
              <el-col :span="10">
                <el-form-item prop="w_received_start">
                  预计<el-input
                    maxlength="8"
                    v-model.number="form.w_received_start"
                    placeholder="3"
                    style="width: 60px"
                  ></el-input
                  >&nbsp;-&nbsp;
                </el-form-item>
                <el-form-item prop="w_received_end">
                  <el-input
                    maxlength="8"
                    v-model.number="form.w_received_end"
                    placeholder="5"
                    style="width: 60px"
                  ></el-input
                  >&nbsp;&nbsp;个工作日
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="提现间隔" prop="w_interval">
              间隔&nbsp;&nbsp;<el-input
                maxlength="8"
                v-model.number="form.w_interval"
                style="width: 115px"
                placeholder="20"
              ></el-input
              >&nbsp;&nbsp;天
            </el-form-item>
            <el-form-item label="提现方式" prop="w_to_bank">
              <el-checkbox v-model="form.w_to_bank">提现到银行卡</el-checkbox>
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="submit">保存</el-button>
              <!-- <el-button>取消</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </NewCard>
    </div>
  </main>
</template>
<script>
import NewCard from "../../../components/newCard.vue";
import {
  getConfigWithdrawSettingApi,
  getConfigAddOrUpdateWithdrawApi,
} from "@/wss/newApi_3-24/base/config.js";

export default {
  components: {
    NewCard,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      console.log(value);
      if (value >= 0 && value <= 100) {
        callback();
      } else {
        callback(new Error("0-100之间"));
      }
    };
    return {
      //左对齐
      labelPosition: "left",
      //数据源
      form: {
        w_min_money: "",
        w_max_money: "",
        w_charge: "",
        w_received_start: "",
        w_received_end: "",
        w_interval: "",
        w_to_bank: true,
      },
      //左侧文字宽度
      formLabelWidth: "160px",
      //表单验证
      rules: {
        w_min_money: [
          {
            required: true,
            message: "请输入最低提现金额",
            trigger: "blur",
            type: "number",
          },
        ],
        w_max_money: [
          {
            required: true,
            message: "请输入最高提现金额",
            trigger: "blur",
            type: "number",
          },
        ],
        w_charge: [
          {
            required: true,

            trigger: "blur",

            validator: validatePass,
          },
        ],
        w_received_start: [
          {
            required: true,
            message: "请输入预计到账时间",
            trigger: "blur",
            type: "number",
          },
        ],
        w_received_end: [
          {
            required: true,
            message: "请输入预计到账时间",
            trigger: "blur",
            type: "number",
          },
        ],
        w_interval: [
          {
            required: true,
            message: "请输入提现间隔",
            trigger: "blur",
            type: "number",
          },
        ],
        w_to_bank: [
          {
            required: true,
            message: "请选中提现方式",
            trigger: "blur",
          },
        ],
      },
      // 接口返回没有改动过的数据
      response: {},
    };
  },
  created() {
    this.getConfigWithdrawSettingFn();
  },
  methods: {
    // 提交数据
    async submit() {
      await this.$refs.form["validate"]();
      let form = this.form;
      let response = this.response;
      response.forEach((item) => {
        if (item.type) {
          item.value = form[item.type];
        }
      });
      let { code, msg } = await getConfigAddOrUpdateWithdrawApi(response);
      if (code != 200) return;
      this.$message({
        type: "success",
        message: msg,
      });
    },
    // 获取提现设置数据
    async getConfigWithdrawSettingFn() {
      let rows = await getConfigWithdrawSettingApi();
      this.response = JSON.parse(JSON.stringify(rows));
      let form = this.form;
      // 回显
      rows.forEach((item) => {
        console.log(item);

        if (item.type) {
          if (item.type == "w_to_bank") {
            form[item.type] = item.value == "false" ? false : true;
          } else {
            form[item.type] = Number(item.value);
          }
        }
      });
      this.form = form;
      console.log(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 10px;
  background-color: rgba(123, 123, 123, 0.2);
  .title {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
  }
}
</style>
<style scoped>
.labelWithdraw {
  padding-top: 20px;
}
.labelWithdraw .el-col > .el-form-item {
  display: inline-block;
}
.label-box-content >>> .el-input {
  width: 400px;
}
</style>